
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<style>
    div{
        width: 200px;
        height: 100px;
        background: #000;
        color: aliceblue;
        text-align: center;
        line-height: 100px;
        float: left;
        margin-left: 20px;
        margin-top: 300px;
    }
    .swing-out-top-bck {
	-webkit-animation: swing-out-top-bck 1s cubic-bezier(0.600, -0.280, 0.735, 0.045) infinite both;
	        animation: swing-out-top-bck 1s cubic-bezier(0.600, -0.280, 0.735, 0.045) infinite both;
}

/* ----------------------------------------------
 * Generated by Animista on 2022-6-17 20:43:48
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation swing-out-top-bck
 * ----------------------------------------
 */
 @-webkit-keyframes swing-out-top-bck {
  0% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateX(-100deg);
            transform: rotateX(-100deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 0;
  }
}
@keyframes swing-out-top-bck {
  0% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateX(-100deg);
            transform: rotateX(-100deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 0;
  }
}

</style>

<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
    <div id="div5"></div>
    <div id="div6"></div>
</body>
<script>
    var oSpan = $('#div1')
    var timer = setInterval(function () {

        let date = new Date(),
            year = date.getFullYear(),
            Month = date.getMonth() + 1,
            day = date.getDate(),
            stone = date.getHours(),
            divide = date.getMinutes()
            second = date.getSeconds()
        $('#div1').html(year)
        $('#div2').html(Month)
        $('#div3').html(day)
        $('#div4').html(stone)
        $('#div5').html(divide)
        $('#div6').html(second)
        $('#div6').addClass('swing-out-top-bck')
        $('#div6').removeClass('class')

    }, 1000);

</script>

</html>